﻿<article class="order-item">
    <header class="order-summary">
        <h2>
            <span class="order-item-price">$<%= order.productData.totalPrice.toFixed(2) %></span>
            - <%= order.formattedDate %>
        </h2>
        <h2>
            <span class="badge"><%= order.status.toUpperCase() %></span>
        </h2>
    </header>

    <section class="order-details">
        <% if(locals.isAdmin){ %>
            <address>
                <p>
                    <a href="mailto:<%= order.userData.email %>"><%= order.userData.name %></a>
                </p>
                <p><%= order.userData.address.street %>
                    (<%= order.userData.address.postalCode %> <%= order.userData.address.city %>
                    )</p>
            </address>
        <% } %>
        <ul>
            <% for(const item of order.productData.items) { %>
                <li>
                    <%= item.product.title %> -
                    $<%= item.totalPrice.toFixed(2) %>
                    ($<%= item.product.price.toFixed(2) %>
                    x <%= item.quantity %>)
                </li>
            <% } %>
        </ul>
    </section>

    <% if(locals.isAdmin){ %>
        <section class="order-actions">
            <form>
                <input type="hidden" name="_csrf"
                       value="<%= locals.csrfToken %>">
                <input type="hidden"
                       name="orderid"
                       value="<%= order.id %>">
                <select name="status">
                    <option value="pending"
                            <% if (order.status === 'pending') { %>slected
                            <%
                            } %>
                    >Pending
                    </option>
                    <option value="fulfilled"
                            <% if (order.status === 'fulfilled') { %>slected
                            <%
                            } %>
                    >Fulfilled
                    </option>
                    <option value="cancelled"
                            <% if (order.status === 'cancelled') { %>slected
                            <%
                            } %>
                    >Cancelled
                    </option>
                </select>
                <button class="btn btn-alt">
                    Update
                </button>
            </form>
        </section>
    <% } %>
</article>